<template>
	<view class="min-h-[100vh] bg-background">
		<view class="px-[30rpx] py-[24rpx] tracking-[1px]">
			<template v-if="list.length">
				<view v-for="item in list" :key="item.id">
					<up-transition :show="true" mode="fade-up">
						<view class="bg-white rounded-[8rpx] mb-[24rpx] last:mb-0" @click="ToTakeFood(item.orderId)">
							<view class="flex items-center justify-between px-[24rpx] py-[18rpx]">
								<view class="text-[22rpx]">系统通知</view>
								<up-icon name="arrow-right" size="24rpx"></up-icon>
							</view>
							<view class="p-[24rpx]">
								<view class="text-[26rpx] flex items-center justify-between">
									<text>{{ item.title }}</text>
									<text class="text-[22rpx] text-[#666]">{{ item.createTime }}</text>
								</view>
								<view class="flex items-center bg-background mt-[16rpx]">
									<up-image :src="$setBaseUrl(item.pic)" width="128rpx" height="128rpx"></up-image>
									<view class="text-[22rpx] p-[16rpx] leading-[26rpx]">
										<view class="line-clamp-2">{{ item.content }}</view>
										<view class="flex items-center mt-[12rpx]">
											<view class="text-[#F98D68]">点击查看订单详情</view>
											<up-icon name="arrow-right-double" size="24rpx" color="#F98D68"></up-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</up-transition>
				</view>
			</template>
			<up-empty mode="list" marginTop="200rpx" v-else></up-empty>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getUserMessage } from '@/config/api/user';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad(() => {
	getMessage();
});
onReachBottom(() => {
	if (list.value.length < params.total) {
		params.pageNum++;
		getMessage();
	}
});
const params = reactive({
	pageNum: 1,
	pageSize: 10,
	total: 0
});
const list = ref([]);
const getMessage = async () => {
	try {
		const res = await getUserMessage(params);
		if (res.code == 200) {
			params.total = res.total;
			list.value = list.value.concat(res.rows);
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const ToTakeFood = (orderId) => {
	uni.navigateTo({
		url: `/pages/takeFood/takeFood?orderId=${orderId}`
	});
};
</script>

<style scoped lang="scss"></style>
